<template>
    <!--电子期刊-->
    <div class="digital-journal-box full-background">
        <div class="contain">
            <div class="content-box">
                <div class="content-item">
                    <div class="guide-item">
                        <!--标题、查看更多-->
                        <icon-title text="电子期刊"><a-icon class="icon" type="read" /></icon-title>
                        <look-more :to="{path:'/ResourceGuides/DigitalJournal', query:{code:'digital-journal'}}"/>
                    </div>
                    <div class="book-box">
                        <!--图书列表-->
                        <div class="book-list-box">
                            <book-seal-component
                                class="book-item"
                                v-for="(item, index) in bookDataList"
                                :key="index"
                                :book-data="item"
                            />

                        </div>
                    </div>
                </div>
            </div>
            <router-link class="slip-down-box" :to="{path:'/DigitalResources', query:{code:'digital-resource'}}">
                <a-icon class="down-img" type="double-right"/>
            </router-link>
        </div>
    </div>
</template>

<script>
import IconTitle from "../../components/ToolComponent/IconTitle"
import LookMore from "../../components/ToolComponent/LookMore";
import BookSealComponent from "../../components/SourseDataComponent/DBook/BookSealComponent";
import LoadTopicPageDataMixin from "@/mixins/LoadTopicPageDataMixin";

//电子期刊栏目code
const CODE = "digital-journal";
export default {
    name: "DigitalJournal",
    data(){
        return{
            //栏目资源
            bookDataList:[]
        }
    },
    components:{
        IconTitle,
        LookMore,
        BookSealComponent
    },
    mixins:[
        //获取子栏目资源
        LoadTopicPageDataMixin,
    ],
    created() {
        //设置栏目code
        this.setPageDataCode(CODE);
        //设置页面大小
        this.setPageSize(14);
        //加载栏目数据
        this.loadPageData(1).then(() => {
            this.bookDataList = this.pageData.records;
        });
    }
}
</script>

<style lang="less" scoped>
@import "../../assets/global.less";
//phone
@media only screen and (max-width: 576px){
    @width:100vw;
    @min-height:100vh;
    .digital-journal-box {
        background-image: url("../../assets/Phone-BackgroundImage/DigitalJournal.png");
        background-repeat: no-repeat;
        background-position-x: center;
        width:@width;
        min-height:@min-height;
        .contain {
            width:@width;
            min-height:@min-height;
            display:grid;
            grid-template-rows: repeat(10, 1fr);
            grid-template-columns: repeat(10, 1fr);
            .content-box{
                //标题导航条
                @content-width:calc(@width / 10 * 8);
                @content-height:calc(@min-height / 10 * 8);
                grid-row: 2 / span 8;
                grid-column: 2 / span 8;
                width:@content-width;
                min-height:@content-height;
                place-self: center;
                display:flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                background-color:white;
                border-radius:1vw;
                .content-item{
                    width:calc(@content-width - 6vw);    //80vw - 6vw
                    min-height:calc(@content-height - 10vw); //144vw - 10vw
                    .guide-item{
                        width:calc(@content-width - 6vw); //80vw - 6vw
                        height:7vw;
                        display:flex;
                        justify-content: space-between;
                        .icon{
                            font-size:5vw;
                            color:rgba(15, 121, 205, 1);
                        }
                    }
                    //书籍列表
                    .book-box{
                        width:calc(@content-width - 6vw);    //80vw - 6vw
                        height:calc(@content-height - 14vw);  //144vw - 14vw
                        border-top:1px solid rgba(15, 121, 205, 1);
                        display:flex;
                        justify-content: center;
                        align-items: flex-end;
                        .book-list-box{
                            width:calc(@content-width - 13vw);    //80vw - 16vw
                            height:calc(@content-height - 19vw);  //144vw - 19vw
                            display:flex;
                            flex-wrap: wrap;
                            justify-content: flex-start;
                            align-content: flex-start;
                            .book-item{
                                margin:3vw 1vw;
                                &:nth-child(n + 10){
                                    display:none;
                                }
                            }
                        }
                    }
                }
            }
            .slip-down-box{
                grid-row:10 / span 1;
                grid-column: 2 / span 8;
                width:calc(@width / 10 / 3 * 2);
                height:calc(@width / 10);
                place-self: center;
                transform: rotate(90deg);
                font-size: calc(@width / 10 / 3 * 2);
                .down-img{
                    color:RGBA(122, 128, 118, 1);
                }
            }

        }
    }

}

//pc
@media only screen and (min-width: 576px){
    @width: 900px;
    @height: 360px;
    .digital-journal-box {
        background-image: url("../../assets/PC-BackgroundImage/digital-journal.png");
        .contain {
            .container;
            display:grid;
            grid-template-rows: 1.5fr 4fr 1fr;
            .content-box{
                //标题导航条
                grid-row: 2 / span 1;
                grid-column: 1 / span 1;
                width:@width;
                height:@height;
                justify-self:center;
                align-self: flex-start;
                display:flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background-color:white;
                border-radius: 10px;
                .content-item{
                    width:calc(@width - 20px);    //880px
                    height:calc(@height - 20px); //170px
                    .guide-item{
                        width:calc(@width - 20px); //880px
                        height:30px;
                        display:flex;
                        justify-content: space-between;
                        .icon{
                            font-size:18px;
                            color:rgba(15, 121, 205, 1);
                        }
                    }
                    //书籍列表
                    .book-box{
                        border-top:1px solid rgba(15, 121, 205, 1);
                        width:calc(@width - 20px);
                        height:calc(@height - 50px);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .book-list-box{
                            width:calc(@width - 80px);
                            height:calc(@height - 70px);
                            display:flex;
                            flex-wrap: wrap;
                            justify-content: flex-start;
                            align-content: flex-start;
                            .book-item{
                                margin:10px;
                                &:nth-child(n + 15){
                                    display:none;
                                }
                            }
                        }
                    }

                }
            }
            .slip-down-box{
                display:none;
            }

        }
    }
}


</style>